<template>
	<page ref='page'>
		<!-- 公用商品详情 wwl	 -->
		<view class="page">
			<view class="banner_box">
				<!-- autoplay -->
				<swiper class="banner" @change='intervalChange' circular autoplay interval="4000" duration="1000"
					indicator-active-color='#d5d5d5' indicator-color='#999'>
					
					<swiper-item style="position: relative;"
						v-for="(item,index) in type == 'marketingCampaign' ? info.goods.carousel : info.carousel"
						:key='index'>
						<view class="swiper_item" @click="onPlay('myVideo')"  v-if="/(.*)\.(mp4|rmvb|avi|ts)$/.test(item)">
							<video :src='item'  :show-play-btn='false'
								:show-fullscreen-btn="false"
								:show-center-play-btn='false' style="width: 100%;height: 100%;" id="myVideo"
								ref="myVideo"></video>
							<image v-if=" !isplay" class="suspend"
								src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/TSnh5LubCTshnjSS9mQ9LYrn8yV4asCA3boocVaU.png">
							</image>
						</view>
						<view class="swiper_item"  v-else>
							<image :src="item" mode="scaleToFill" :data-index="index" class="image"
								@click="$global.onPreview(item)" style="    background-size: 100% 100%;"></image>
						</view>
					</swiper-item>
					<swiper-item style="position: relative;"
						v-for="(item,index) in type == 'marketingCampaign' ? info.goods.gy_carousel : info.gy_carousel"
						:key='index'>
						<view class="swiper_item" @click="onPlay('myVideo')"  v-if="/(.*)\.(mp4|rmvb|avi|ts)$/.test(item)">
							<video :src='item'  :show-play-btn='false'
								:show-fullscreen-btn="false"
								:show-center-play-btn='false' style="width: 100%;height: 100%;" id="myVideo"
								ref="myVideo"></video>
							<image v-if=" !isplay" class="suspend"
								src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/TSnh5LubCTshnjSS9mQ9LYrn8yV4asCA3boocVaU.png">
							</image>
						</view>
						<view class="swiper_item"  v-else>
							<image :src="item" mode="scaleToFill" :data-index="index" class="image"
								@click="$global.onPreview(item)" style="    background-size: 100% 100%;"></image>
						</view>
					</swiper-item>
				</swiper>
				
				<view class="swiper_option">
					<text v-for="(items,indexs) in type == 'marketingCampaign' ? info.goods.carousel : info.carousel"
						:key="indexs" :class="bannerActive == indexs ?  'active_icon' :''" class="icon">
					</text>
					<text v-for="(items,indexs) in type == 'marketingCampaign' ? info.goods.gy_carousel : info.gy_carousel"
						:key="indexs" :class="bannerActive == indexs ?  'active_icon' :''" class="icon">
					</text>
					
					
				</view>
			</view>
			
			<!-- info -->
			<view class="info_box">
				<view class="top">
					<text>¥</text>
					<text>{{info.amount_x}}</text>
					<text v-if='type != "buildingMaterialsCity"'>起</text>
				</view>
				<!-- <view class="youhui" v-if='info.available != 0 && type == "buildingMaterialsCity" || info.available != 0 && type == "decorationMoneyExchange"'>
					优惠：装修金抵扣立减{{info.available}}元
				</view> -->
				<view class="bottom">
					<view class="left">
						{{type == 'marketingCampaign' ? info.goods.name : info.name}}
					</view>
					<!-- #ifdef MP-WEIXIN  -->
					<button class="right" :data-id='info.id' open-type="share">
						<image
							src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/3rA1cq50vTXQVEXInDZDEceL38m8YOYoNrvnvs0w.png"
							mode=""></image>
						<text class="text1">分享</text>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN   -->
					<view class="right" @click="onShare()">
						<image
							src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/3rA1cq50vTXQVEXInDZDEceL38m8YOYoNrvnvs0w.png"
							mode=""></image>
						<text>分享</text>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<!-- operation -->
			<view class="tab_box">
				<view class="row" v-for="(row,i) in tabList" :key='i' :class="row.id == tabActive ? 'active':''"
					@click="onChangeTab(row.id)" v-if="row.id">
					<view v-if="row.id == 3">
						{{userinfo.recommend_status == 1 ? row.name : '推荐已关闭'}}
						
					</view>
					<view v-if="row.id != 3">
						{{row.name}}
					</view>
					
				</view>
			</view>
			
			
			
			<view class="info_content" v-if='tabActive == 1' style="width: 100%;height: 100%;">
				
					
				<view class="parse">
					<view class="proudct-item-area">
						<image :src="items" mode="widthFix" :data-index="indexs" class="image proudct-item-img"
						 style="background-size: 100% 100%;width: 100%;bottom: 4px;" v-for="(items,indexs) in type == 'marketingCampaign' ? info.goods.gy_content : info.gy_content"
						:key="indexs"></image>
					</view>
					<u-parse :html="type == 'marketingCampaign' ? info.goods.content : info.content" />
					
					<!-- <bctos-rich-text :nodes="type == 'marketingCampaign' ? info.goods.content : info.content"></bctos-rich-text> -->
				</view>
				
				<view class="priceshuom">
					<view class="prsm1" >
						平台提示
					</view>
					<view class="prsm2" >
						<view class="prsm3" ><view class="prsm4" >· </view>展示的商品</view>目前平台只做商品展示跟商品预订，您联系卖家的时候请仔细核实情况，不要上当受骗
					</view>
					
				</view>
				
				<!-- <view class="priceshuom">
					<view class="prsm1" >
						价格说明
					</view>
					<view class="prsm2" >
						<view class="prsm3" ><view class="prsm4" >· </view>购买价</view>是您单独购买商品的实时标价，不因表述的差异改变性质。具体成交价格以结算页面价格为准
					</view>
					<view class="prsm2" >
						<view class="prsm3" ><view class="prsm4" >· </view>拼购价</view>是您拼单购买商品的价格
					</view>
					<view class="prsm2" >
						<view class="prsm3" ><view class="prsm4" >· </view>划线价</view>指平台经营者建议参考价，并非原价，仅供参考
					</view>
					<view class="prsm2" >
						<view class="prsm4" >·</view>特别提示：实际的成交价可能因为您和商家议价或使用平台装修金、积分、优惠卷等发生变化，最终以订单结算页的价格为准。若商家单独对价格进行说明的，以商家的表述为准。
					</view>
				</view> -->
				
				<view class="info_list" v-if='recommend.total > 0 && userinfo.recommend_status == 1'>
					<view class="title">
						<text></text>
						<text>猜你喜欢</text>
						<text></text>
					</view>
					<renovation-row :list='recommend.list' :page='recommend.page' :size='recommend.size'
						:type='type == "marketingCampaign" ? "caiLike" : type' :duihuan='duihuan' />
				</view>
			</view>
			<view class="info_content" v-else-if='tabActive == 3'>
				<view class="info_list" style="padding: 0rpx 36rpx 30rpx;margin-top: -30rpx;"
					v-if='recommend.total > 0'>
					<renovation-row :list='recommend.list' :page='recommend.page' :size='recommend.size'
						:type='type == "marketingCampaign" ? "caiLike" : type' :duihuan='duihuan' />
				</view>
				<empty :status='2' v-else />
			</view>
			<view class="evaluate" v-else-if='tabActive == 2 '>
				<evaluate :list='evaluate.list' v-if='evaluate.list && evaluate.list.length  > 0' />
				<empty :status='2' v-else />
			</view>
			
			
			<!-- && info.type != 4 -->
			<view class="bottom" v-if='info.id'>
				<purchase-operation :info='info' :type='type' :source='source' :duihuan='duihuan' :offer='offer' :yunshop='yunshop' :shopaid='shopaid' />
			</view>
		</view>
	</page>
</template>

<script>
	import {
		getGoodsInfo,
		getGZGoodsInfo,
		getZXJGoodsInfo,
		getCommodityComment,
		getJCCGoodsInfo,
		get_goods_browse_record
	} from "./static/api.js"
	import {
		getGuessYouLike,
		getGuessYouLikezong,
		getGuessYouLikeZXJ
	} from '@/utils/getRequest.js'
	import purchaseOperation from "@/components/purchase-operation.vue"
	import renovationRow from "@/components/renovation-row.vue"
	import uParse from "@/components/u-parse/u-parse.vue"
	import evaluate from '@/components/evaluate.vue'
	export default {
		components: {
			uParse,
			renovationRow,
			purchaseOperation,
			evaluate
		},
		data() {
			return {
				availableIntegraC:0,
				flag: false,
				isplay: false,
				source:0,
				shopaid:0,
				yunshop:0,
				goods_name:'',
				goods_gz_id:0,
				goods_id:0,
				id: null,
				type: null, // buildingMaterialsCity 建材成   findDesign 设计师   findCraftsman工匠  decorationMoneyExchange 装修金商城  marketingCampaign 营销  caiLike 猜你喜欢
				duihuan: 0,
				bannerActive: 0,
				info: {
					goods: {
						carousel: []
					},
					carousel: [],
					amount_x: '',
					name: ''
				},
				tabActive: 1,
				tabList: [{
						name: '详情',
						id: 1
					},
					{
						name: '评价',
						id: 2
					},
					{
						name: '推荐',
						id: 3
					}
				],
				recommend: {
					loading: false,
					list: [],
					page: 1,
					size: 10,
					total: 0
				},
				evaluate: {
					loading: false,
					list: [],
					page: 1,
					size: 10,
					total: 0
				},
				offer: '',
				userinfo: [],
				isplay: false,
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.type == 'marketingCampaign' ? this.info.goods.name : this.info.name,
				imageUrl: this.type == 'marketingCampaign' ? this.info.goods.carousel[0] : this.info.carousel[0],
				path: `/pagesCommodity/information?id=${this.id}&type=${this.type}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`
			};

		},
		onShareTimeline(ops) {
			return {
				title: this.type == 'marketingCampaign' ? this.info.goods.name : this.info.name,
				imageUrl: this.type == 'marketingCampaign' ? this.info.goods.carousel[0] : this.info.carousel[0],
				path: `/pagesCommodity/information?id=${this.id}&type=${this.type}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`
			}
		},
		onLoad(params) {
			if (params.offer) this.offer = params.offer
			if(params.source) this.source = params.source
			if(params.yunshop) this.yunshop = params.yunshop
			if(params.shopaid) this.shopaid = params.shopaid
			this.id = params.id
			this.type = params.type
			this.userinfo = this.$store.state.userInfo;
			console.log(this.userinfo.recommend_status, '获取用户信息');
			if(params.duihuan != undefined){
				this.duihuan = parseInt(params.duihuan);
				
				
			}
			this.getInfo()
		},
		onReachBottom() {
			//this.type != 'decorationMoneyExchange' &&  this.type != 'marketingCampaign' &&
			if (this.tabActive != 2 && this.recommend.page * this.recommend.size < this.recommend.total) {
				this.recommend.page++
				this.getRecommend()
			} else if (this.tabActive == 2 && this.evaluate.page * this.evaluate.size < this.evaluate.total) {
				this.evaluate.page++
				this.getEvaluate()
			}


		},
		methods: {
			onPlay(id) {
				if (!this.isplay) {
					this.isplay = true
					var videoCtx2 = uni.createVideoContext(id);
					videoCtx2.play();
					//#ifndef MP-WEIXIN
					setTimeout(() => {
						videoCtx2.play();
					}, 200);
					// #endif
				} else {
					var videoCtx = uni.createVideoContext(id);
					videoCtx.pause();
					this.isplay = false
					//#ifndef MP-WEIXIN
					setTimeout(() => {
						videoCtx.pause();
					}, 200);
					// #endif
				}
			},
			onShare() {
				console.log(this.$global.originalId,'阿斯蒂芬');
				console.log(this.info.id,'阿斯蒂芬2');
				console.log(this.type,'阿斯蒂芬3');
				console.log(this.$store.state.userInfo,'阿斯蒂芬4');
				console.log(this.$global.environment,'阿斯蒂芬5');
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					miniProgram: {
						id: this.$global.originalId,
						path: `/pagesCommodity/information?id=${this.info.id}&type=${this.type}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
						type: this.$global.environment == 'development' ? 2 : 0,
						webUrl: "https://xiaoqu.wuguoxin.vip"
					},
					title: this.type == 'marketingCampaign' ? this.info.goods.name : this.info.name,
					imageUrl: this.$global.shareImg,
					// this.type == 'marketingCampaign' ? this.info.goods.cover : this.info.cover,
					success: function(res) {},
					fail: function(err) {
						// console.log(JSON.stringify(err))
					}
				});
			},
			async getRecommend() {
				this.recommend.loading = true
				var zone_id = !(this.type == 'findDesign' || this.type == 'findCraftsman') ? this.$store.state
					.currentArea ? this.$store.state.currentArea.cityId : '' : this.$store.state.addressSelect ? this
					.$store.state.addressSelect.id : ''
				try {
					if (this.type == 'decorationMoneyExchange') {
						// shopping_id:this.info.shopping_id,
						var res = await getGuessYouLikeZXJ({
							goods_id: this.info.fitment_id,
							page: this.recommend.page,
							limit: this.recommend.size,
							zone_id
						})
					} else {
						var res = await getGuessYouLikezong({
							shopping_id: this.info.shopping_id,
							goods_id: this.info.id,
							page: this.recommend.page,
							limit: this.recommend.size,
							zone_id,
							type: this.type == 'findCraftsman' ? 1 : 2
						})
					}
					this.recommend.list = this.recommend.page == 1 ? res.list : [...this.recommend.list, ...res.list]
					this.recommend.total = res.count
					this.recommend.loading = false
				} catch {
					this.recommend.loading = false
				}
			},

			onBack() {
				let routes = getCurrentPages()
				if (routes.length == 1) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			onChangeTab(id) {
				console.log(id,'推荐ID');
				console.log(this.userinfo.recommend_status,'推荐ID2');
				if (id == 3 && this.userinfo.recommend_status == 0) {
					uni.showToast({
						title: "推荐已关闭",
						icon: "none"
					})
					return;
				}
				this.tabActive = id
				
				if (this.tabActive == 2 && !this.evaluate.total) this.getEvaluate()
			},
			async getEvaluate() {
				uni.showLoading()
				this.evaluate.loading = true
				try {
					var res = await getCommodityComment({
						id: this.id,
						type: this.type == 'findCraftsman' ? 2 : 1
					}) //1设计师建材城2工长
					uni.hideLoading()
					this.evaluate.list = res
					this.evaluate.loading = false
				} catch {
					uni.hideLoading()
					this.evaluate.loading = false
				}
			},
			intervalChange(e) {
				this.bannerActive = e.detail.current
				if (this.isplay) this.onPlay('myVideo')
			},
			//新增浏览历史
			async get_goods_browse_record() {
				
				var res = await get_goods_browse_record({
						name: this.goods_name,
						goods_gz_id: this.goods_gz_id == 0 ? 0 : this.goods_gz_id,
						goods_id: this.goods_id == 0 ? 0 : this.goods_id
				}) 
				
				
			},
			//查询商品详细信息
			async getInfo() {
				uni.showLoading()
				var zone_id = !(this.type == 'findDesign' || this.type == 'findCraftsman') ? this.$store.state
					.currentArea ? this.$store.state.currentArea.cityId : '' : this.$store.state.addressSelect ? this
					.$store.state.addressSelect.id : ''
				try {
					if (this.type == 'findCraftsman') {
						var res = await getGZGoodsInfo({
							id: this.id,
							zone_id
						})
						this.goods_gz_id = res.id;
						console.log(res,'工长1')
					} else if (this.type == 'decorationMoneyExchange') {
						var res = await getZXJGoodsInfo({
							id: this.id,
							zone_id
						})
						this.goods_id = res.id;
						console.log(res,'工长0')
					} else if (this.type == 'marketingCampaign') {
						var res = await getJCCGoodsInfo({
							id: this.id,
							zone_id
						})
						this.goods_id = res.id;
						console.log(res,'工长2')
					} else {
						var res = await getGoodsInfo({
							id: this.id,
							zone_id
						})
						this.goods_id = res.id;
						console.log(res,'工长3')
					}
					if(res.code){
						uni.showToast({title:res.data,icon:'none'})
					}
					this.goods_name = res.name;
					this.info = res;
					this.get_goods_browse_record();
					console.log(res,'工长')
					// this.info.carousel.unshift(
					// 	'http://tuzhuang-1304727035.file.myqcloud.com/files/mda-mj5dfb183v1df578.mp4'
					// )
					uni.hideLoading()
					// if(this.type != 'decorationMoneyExchange' &&  this.type != 'marketingCampaign' ) 
					await this.getRecommend()

				} catch {
					this.getRecommend()
					uni.hideLoading()
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.youhui{
		background-color: #ff5555;
		    color: #ffffff;
		    font-size: 12px;
		    width: 100%;
		    display: inline;
		    padding: 2px 10px;
		    border-radius: 4px;
	}
	.proudct-item-area{
	    // margin: 0 10px;
	    border-radius: 8px;
	    box-sizing: border-box;
	    display: flex;
	    flex-direction: column;
	}
	    
	.proudct-item-img{
	    width: 100%;
	}
	
	.priceshuom{
		padding: 10px 18px;
		box-shadow: 0px 0px 2px 2px #e2e2e2;
		    margin-top: 20px;
		.prsm1{
			font-size: 15px;
			margin-bottom: 10px;
		}
		.prsm2{
			font-size: 13px;
			color: #656565;
			margin-bottom: 10px;
		}
		.prsm3{
			color: #000;
			margin-bottom: 3px;
			font-weight: 600;
		}
		.prsm4{
			display: inline;
			color: #ff0000;
			margin-right: 6px;
			font-weight: 600;
		}
	}
	.page {
		width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
		min-height: 80vh;
		background-color: #f6f7fb;
		border-bottom: 250rpx solid #fff;
	}

	.left_icon {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 99;
		top: 40px;
		left: 15rpx;
		width: 70rpx !important;
		height: 70rpx !important;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tabber {
		transition: all 0.8s;
	}

	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}

	// 轮播图
	.banner_box {
		position: relative;
		width: 100%;

		.swiper_option {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 80rpx;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				display: inline-block;
				width: 12rpx;
				height: 12rpx;
				background: #ebebeb;
				border-radius: 12rpx;
				margin-right: 12rpx;

				&:last-child {
					margin-right: 0;
				}
			}

			.active_icon {
				width: 30rpx;
				transition: 0.5s all;
			}
		}
	}

	.banner {
		width: 100%;
		height: 506rpx;

		.swiper_item {
			position: relative;
			width: 100%;
			height: 500rpx;

			.image {
				width: 100%;
				height: 500rpx;
			}
		}
	}

	.info_box {
		background-color: #fff;
		padding: 20rpx 0 20rpx 32rpx;
		width: 100%;
		box-sizing: border-box;

		.top {
			padding-right: 32rpx;
			width: 100%;
			box-sizing: border-box;

			>text:nth-child(1),
			>text:nth-child(2) {
				font-weight: 700;
				font-size: 44rpx;
				line-height: 60rpx;
				color: #FF0000;
			}

			>text:nth-child(2) {
				margin-left: 5rpx;
			}

			>text:nth-child(3) {
				margin-left: 16rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				color: #FF0000;
			}
		}

		.bottom {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.left {
				width: calc(100% - 142rpx);
				font-size: 28rpx;
				line-height: 40rpx;
				color: #26252A;
				font-weight: 700;
			}

			.right {
				width: 112rpx;
				height: 46rpx;
				background-color: #f6f7fb;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 32rpx 0 0 32rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}

				text {
					color: #ADADAD;
					font-size: 24rpx;
				}
			}

			button::after {
				border: 0;
				width: 100%;
				text-align: center;
			}

			button {
				display: flex;
				justify-content: center;
				align-item: center;
				padding: 0;
			}
		}
	}

	.evaluate {
		padding: 0 36rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
	}

	.tab_box {
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 62rpx 48rpx;
		box-sizing: border-box;
		width: 100%;

		.row {
			flex: 1;
			position: relative;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #26252A;

			&:nth-child(1) {
				text-align: left;
			}

			&:nth-child(2) {
				text-align: center;
			}

			&:nth-child(3) {
				text-align: right;
			}

		}

		.active {
			color: $theme;

			&::before {
				position: absolute;
				bottom: -14rpx;
				content: '';
				width: 56rpx;
				height: 8rpx;
				background: $theme;
			}
		}
	}

	.info_content {
		width: 100%;
		background-color: #fff;
		min-height: 200rpx;

		.parse {
			// text-align: center;
			padding: 0 36rpx;
			width: 100%;
			box-sizing: border-box;
		}
	}

	.info_list {
		padding: 30rpx 36rpx 30rpx;
		width: 100%;
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			align-items: center;

			text:nth-child(2) {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #A4A4A4;
				margin: 0 20rpx;
			}

			text:nth-child(1),
			text:nth-child(3) {
				width: calc(50% - 4em);
				background-color: #b9b9b9;
				height: 2rpx;
			}
		}
	}

	.suspend {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 5;
		// transform: translate(-50%, -50%);
	}
</style>
